<template>
	<div id ="document" style="padding:20px">
		<el-row class="tac" :gutter="20" v-bind:style="{height: dynHeight}">
          <el-col :span="4">
            <el-menu
              :default-active="selClassify"
              class="el-menu-vertical-demo"
              @select="loadDocumentList">
                <el-menu-item v-for="(itemChild , index) in docClassifyList" :index="itemChild.classifyIndex" :key="index">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{itemChild.name}}</span>
                </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="19">
            <el-row :gutter="25">
              <el-col :span="8" v-for="(doc) in docList" :key="doc.classifyIndex">
                <a @click="showDetial(doc.docIndex,doc.name)">
                  <el-card :body-style="{ padding: '0px' }" style="margin-bottom:20px;cursor:pointer"  shadow="hover">
                    <div slot="header" class="clearfix">
                      <span class="title">{{doc.name}}</span>
                      <span class="desc" style="float: right;">{{doc.browserTimes}}次浏览</span>
                    </div>
                    <div class="desc" style="padding:10px">
                      <el-row>
                        <el-col :span="10">
                          <div v-if="doc.img != null">
                            <img :src="'static/images/docimg/'+doc.img" style="height:100px;width:100px;"/>
                          </div>
                          <div v-else>
                            <img src="static/images/doc.png" style="height:100px;width:100px;"/>
                          </div>
                        </el-col>
                        <el-col :span="14">
                          <div>
                            <span class="desc">{{doc.desc}}</span>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="15">
                          <div style="margin-top:5px;margin-left:7px">
                            <span class="desc">创建时间：{{doc.createtime}}</span>
                          </div>
                        </el-col>

                      </el-row>
                    </div>
                  </el-card>
                </a>
              </el-col>
            </el-row>

          </el-col>
        </el-row>
	</div>
</template>

<script>
	export default {
	    created(){
          //访问后台获取文档分类
          this.dynHeight=document.documentElement.clientHeight-90+"px";
          this.$http({
            method: "GET",
            url: "http://127.0.0.1:8888/doc/docClassifyList",
            data: "",
          }).then((response) => {
            this.docClassifyList = response.body;
            //默认选中列表中的第一项
            this.selClassify = this.docClassifyList[0].classifyIndex;
            //加载文档列表
            this.loadDocumentList(this.selClassify);
            
          }, (response) => {
            console.log('失败');
          })
      },
	    data() {
	      return {
	        docClassifyList:"", 
	        dynHeight:"",
	        selClassify:"",
	        docList:""
	      }
		  },
	    methods: {
	      showDetial(docIndex,docName){
	        this.$router.push({ 
	          name: 'docDetail',
	          params: {
              classifyIndex: this.selClassify,
              docIndex: docIndex,
              docName: docName
            }
	        });
	      },
	      // 加载选中分类的文档列表
	      loadDocumentList(key, keyPath){
          this.selClassify = key;
          this.$http.post('http://127.0.0.1:8888/doc/docList', 
          {
            "classifyIndex" : key
          }).then(response => {
            console.log(response);
            this.docList = response.body;
          }, response => {
            console.log('失败');
          });
	      }
	    }
	}
</script>

<style>
#document {
	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
	font-weight: 400;
}

.title{
  font-size:16px;
  font-weight:600;
}
.desc{
  font-size:14px;
  color: rgba(113, 102, 42, 0.9);
}
</style>